<template>
  <Editor v-model="modelValue" :init="init" :disabled="disabled" :placeholder="placeholder" />
</template>

<script>
import tinymce from 'tinymce/tinymce' // 引入tinymce核心库
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme' // 引入主题
import 'tinymce/plugins/link' // 根据需要引入插件
import 'tinymce/plugins/paste' // 根据需要引入插件
import 'tinymce/plugins/table' // 根据需要引入插件
import 'tinymce/plugins/code' // 根据需要引入插件
import {WordPaster} from '../../static/WordPaster/js/w' // 注意：此路径是相对于当前文件
import {zyOffice} from '../../static/zyOffice/js/o' // 注意：此路径是相对于当前文件
import {zyCapture} from '../../static/zyCapture/z' // 注意：此路径是相对于当前文件

export default {
  components: {
    Editor
  },
  name: 'HelloWorld',
  props: {
    modelValue: {
      type: String,
      default: '泽优全平台内容发布解决方案（WordPaster） for tinymce4-vue2-cli'
    },
    placeholder: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 300
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'code wordpaster netpaster importwordtoimg wordimport excelimport pptimport pdfimport'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | image media table template preview | code selectall wordpaster netpaster importwordtoimg wordimport excelimport pptimport pdfimport'
    },
    templates: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      init: {
        // 注意：此路径是相对于当前文件
        language_url: '../../static/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        // 注意：此路径是相对于当前文件
        skin_url: '../../static/tinymce/skins/lightgray',
        // 注意：此路径是相对于当前文件
        content_css: '../../static/tinymce/skins/lightgray/content.min.css',
        menubar: true,
        statusbar: true,
        plugins: this.plugins,
        toolbar: this.toolbar,
        toolbar_mode: 'sliding',
        font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
        height: this.height,
        placeholder: this.placeholder,
        branding: false,
        resize: true,
        elementpath: true,
        content_style: '',
        templates: this.templates,
        quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
        quickbars_image_toolbar: 'alignleft aligncenter alignright',
        quickbars_insert_toolbar: false,
        image_caption: true,
        image_advtab: true,
        convert_urls: false,
        images_upload_handler: function (blobInfo) {
        },
        setup: function (editor) {
          editor.on('init', function () {
          })
          editor.on('paste', function (e) {
            WordPaster.getInstance().SetEditor(editor).PasteManual()
            e.preventDefault()
          })

          // 注意：图片路径是相对于当前文件
          var icoWordpaster = '../../static/WordPaster/css/word.png'
          var icoNet = '../../static/WordPaster/css/net.png'
          var icoImportPDF = '../../static/WordPaster/css/pdf.png'
          var icoImportPPT = '../../static/WordPaster/css/ppt.png'
          var icoWordToImg = '../../static/WordPaster/css/word1.png'
          var icoImportWord = '../../static/WordPaster/css/word2.png'
          var icoImportExcel = '../../static/WordPaster/css/excel.png'

          // 添加插件-Word粘贴
          tinymce.PluginManager.add('wordpaster', function (e) {
            e.addButton('wordpaster', {
              text: 'Word一键粘贴',
              icon: true,
              image: icoWordpaster,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).Paste()
              }
            })
            e.addMenuItem('wordpaster', {
              text: 'Word一键粘贴',
              icon: true,
              image: icoWordpaster,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).Paste() }
            })
          })

          // 添加插件-网络图片
          tinymce.PluginManager.add('netpaster', function (e) {
            e.addButton('netpaster', {
              text: '导入网络图片',
              icon: true,
              image: icoNet,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).UploadNetImg()
              }
            })
            e.addMenuItem('netpaster', {
              text: '导入网络图片',
              icon: true,
              image: icoNet,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).UploadNetImg() }
            })
          })

          // 添加插件-Word转图片
          tinymce.PluginManager.add('importwordtoimg', function (e) {
            e.addButton('importwordtoimg', {
              text: 'Word转图片',
              icon: true,
              image: icoWordToImg,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).importWordToImg()
              }
            })
            e.addMenuItem('importwordtoimg', {
              text: 'Word转图片',
              icon: true,
              image: icoWordToImg,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).importWordToImg() }
            })
          })

          // 添加插件-导入Word
          tinymce.PluginManager.add('wordimport', function (e) {
            e.addButton('wordimport', {
              text: '导入Word文档',
              icon: true,
              image: icoImportWord,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).importWord()
              }
            })
            e.addMenuItem('wordimport', {
              text: '导入Word文档',
              icon: true,
              image: icoImportWord,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).importWord() }
            })
          })

          // 添加插件-导入Excel
          tinymce.PluginManager.add('excelimport', function (e) {
            e.addButton('excelimport', {
              text: '导入Excel文档',
              icon: true,
              image: icoImportExcel,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).importExcel()
              }
            })
            e.addMenuItem('excelimport', {
              text: '导入Excel文档',
              icon: true,
              image: icoImportExcel,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).importExcel() }
            })
          })

          // 添加插件-导入ppt
          tinymce.PluginManager.add('pptimport', function (e) {
            e.addButton('pptimport', {
              text: '导入PPT文档',
              icon: true,
              image: icoImportPPT,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).importPPT()
              }
            })
            e.addMenuItem('pptimport', {
              text: '导入PPT文档',
              icon: true,
              image: icoImportPPT,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).importPPT() }
            })
          })

          // 添加插件-导入pdf
          tinymce.PluginManager.add('pdfimport', function (e) {
            e.addButton('pdfimport', {
              text: '导入PDF文档',
              icon: true,
              image: icoImportPDF,
              onclick: function () {
                WordPaster.getInstance().SetEditor(editor).ImportPDF()
              }
            })
            e.addMenuItem('pdfimport', {
              text: '导入PDF文档',
              icon: true,
              image: icoImportPDF,
              context: 'tools',
              onclick: function () { WordPaster.getInstance().SetEditor(editor).ImportPDF() }
            })
          })
        }
      }
    }
  },
  mounted () {
    // 初始化
    WordPaster.getInstance({
      // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
      PostUrl: 'http://localhost:8891/upload.aspx',
      // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
      ImageUrl: 'http://localhost:8891{url}',
      // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
      FileFieldName: 'file',
      // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
      ImageMatch: ''
    })
    // zyoffice
    zyOffice.getInstance({
      word: 'http://localhost:13710/zyoffice/word/convert',
      wordExport: 'http://localhost:13710/zyoffice/word/export',
      pdf: 'http://localhost:13710/zyoffice/pdf/upload'
    })

    // zyCapture
    zyCapture.getInstance({
      config: {
        PostUrl: 'http://localhost:8891/upload.aspx',
        License2: '',
        FileFieldName: 'file',
        Fields: { uname: 'test' },
        ImageUrl: 'http://localhost:8891{url}'
      }
    })
    tinymce.init({})
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
